<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            height: 200px;
            width: 500px;
            margin: 100px auto;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
        }
        .input{
            height: 50px;
            line-height: 50px;
        }
        button{
            height: 50px;
        }
    </style>
</head>
<body>
    <div class="box">
        <input type="text">
        <input type="text">
        <button>登录</button>
    </div>
</body>
</html>
<script>
    var input = document.querySelectorAll('input')
    var btn = document.querySelector('button')
    function ajax ( type , url , pages , fn){
        var str = ''
        for(var key in pages){
            str += `${key}=${pages[key]}&`
        }
        var res = str.slice(0,str.length - 1)

        var xtm = new XMLHttpRequest()
        xtm.open(type , type == 'get' ? url + '?' + res : url )

        xtm.onreadystatechange = ()=>{
            if(xtm.readyState == 4){
                fn(JSON.parse(xtm.responseText))
            }
        }
        
        xtm.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
        xtm.send(type == 'post' ? res : '')
    }
    
    var pages = { page : 1 , count : 5 } 
    

    btn.onclick = ()=> {
        if(input[0].value && input[1].value){
            ajax( 'post' , 'https://yantianfeng.com/api/register' , {} , function(data){
                console.log(data);
                if( data.usename.indexOf(input[0].value) != -1 && data.password.indexOf(input[1].value != -1) ){
                    alert('登陆成功')
                }
            } )       

        }else{
            alert('用户名和密码不能为空')
        }
    }
</script>